<div id="no-product-available" class="no-product-available-dropdown hide-on-esc">
  <%= render partial: 'spree/shared/no_product_available' %>
</div>

<div class="d-table table-responsive" id="cart-detail" data-hook>
  <div class="active d-none d-lg-table-row shopping-cart-table-header" data-hook="cart_items_headers">
    <div class="d-table-cell cart-item-description-header text-uppercase"><%= Spree.t('cart_page.product') %></div>
    <div class="d-table-cell"></div>
    <div class="d-table-cell cart-item-price-header text-uppercase"><%= Spree.t(:price) %></div>
    <div class="d-table-cell cart-item-quantity-header text-uppercase"><%= Spree.t('cart_page.quantity') %></div>
    <div class="d-table-cell cart-item-total-header text-uppercase"><%= Spree.t(:total) %></div>
    <div class="d-table-cell cart-item-delete-header"></div>
  </div>
  <div id="line_items" class="shopping-cart-table-line-items" data-hook>
    <%= render partial: 'spree/orders/line_item', collection: order_form.object.line_items, locals: { order_form: order_form } %>
  </div>
</div>

<% if @order&.errors&.any? %>
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      document.getElementById('overlay').classList.add('shown');
      document.getElementById('no-product-available').classList.add('shown');
      window.scrollTo(0, 0);
    })
  </script>
<% end %>
